`<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定位练习</title>
</head>
<style>
    .box1 {
        margin: 0 auto;
        position: relative;
        z-index: 1;
        top: 100px;
        left: 100px;
        width: 200px;
        height: 200px;
        background-color: #ff6700;
    }

    .box2 {
        position: relative;
        margin: 0 auto;
        width: 200px;
        height: 200px;
        background-color: #47cb89;
    }

    /*绝对定位*/
    .on {
        position: relative;
        width: 560px;
        height: 560px;
        background-color: #e6fffb;
    }

    .on-one {
        width: 360px;
        height: 360px;
        background-color: #adc6ff;
    }

    .absolute-one {
        position: absolute;
        left: 30px;
        top: 20px;
        width: 120px;
        height: 120px;
        background-color: #e6f7ff;
    }

    .fixed {
        position: fixed;
        top: 30px;
        right: 30px;
    }

    .mbx {
        width: 800px;
        height: 300px;
        background-color: greenyellow;
        margin: 0 auto;
    }

    .bx {
        position: fixed;
        left: 50%;
        top: 430px;
        margin-left: 405px;
        width: 20px;
        height: 50px;
        background-color: #c60f2b;
    }

</style>
<body>

<div class="box1"></div>
<div class="box2"></div>

<div class="on">
    <div class="on-one"></div>
    <div class="absolute-one"></div>
</div>

<div class="fixed">
    <em style="font-size: 18px;color: #47cb89"> 广告位招租 </em>
</div>



</body>
</html>`